<template>
  <div class="detail-page">
    <!-- 顶部 -->
    <header class="bg-white shadow-sm sticky top-0 z-10">
      <div class="container mx-auto px-4 py-3 flex items-center justify-between">
        <div class="flex items-center">
          <router-link to="/" class="mr-2">
            <i class="fas fa-arrow-left text-gray-600"></i>
          </router-link>
          <h1 class="text-lg font-semibold">{{ docName }}</h1>
        </div>
        <button
          @click="shareTemplate"
          class="flex items-center px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium"
        >
          <i class="fas fa-share-alt mr-1"></i>
          <span>分享</span>
        </button>
      </div>
    </header>
    <!-- 文档预览区 -->
    <div class="preview-area flex justify-center py-6 bg-gray-50 min-h-[calc(100vh-56px)]">
      <div v-if="docContent" class="bg-white shadow-lg rounded-lg p-6 max-w-2xl w-full mx-4">
        <div class="text-center mb-6">
          <h1 class="text-xl font-bold text-gray-800">民事答辩状 (离婚纠纷)</h1>
        </div>
        
        <div class="space-y-4 text-sm">
          <div>
            <h3 class="font-semibold mb-2">说明：</h3>
            <ol class="list-decimal list-inside space-y-1 text-gray-700">
              <li>本答辩状适用于离婚纠纷案件</li>
              <li>请根据实际情况填写相关信息</li>
              <li>所有信息必须真实准确</li>
            </ol>
          </div>
          
          <div>
            <h3 class="font-semibold mb-2">当事人信息：</h3>
            <div class="grid grid-cols-2 gap-2 text-gray-700">
              <div>姓名：<span class="border-b border-gray-300 inline-block min-w-[100px]"></span></div>
              <div>性别：<span class="border-b border-gray-300 inline-block min-w-[100px]"></span></div>
              <div>出生日期：<span class="border-b border-gray-300 inline-block min-w-[100px]"></span></div>
              <div>工作单位：<span class="border-b border-gray-300 inline-block min-w-[100px]"></span></div>
              <div>职务：<span class="border-b border-gray-300 inline-block min-w-[100px]"></span></div>
              <div>民族：<span class="border-b border-gray-300 inline-block min-w-[100px]"></span></div>
              <div>联系电话：<span class="border-b border-gray-300 inline-block min-w-[100px]"></span></div>
              <div>住所地：<span class="border-b border-gray-300 inline-block min-w-[100px]"></span></div>
              <div class="col-span-2">经常居住地：<span class="border-b border-gray-300 inline-block min-w-[200px]"></span></div>
              <div>证件类型：<span class="border-b border-gray-300 inline-block min-w-[100px]"></span></div>
              <div>证件号码：<span class="border-b border-gray-300 inline-block min-w-[100px]"></span></div>
            </div>
          </div>
          
          <div>
            <h3 class="font-semibold mb-2">委托诉讼代理人：</h3>
            <div class="grid grid-cols-2 gap-2 text-gray-700">
              <div>姓名：<span class="border-b border-gray-300 inline-block min-w-[100px]"></span></div>
              <div>单位：<span class="border-b border-gray-300 inline-block min-w-[100px]"></span></div>
              <div>职务：<span class="border-b border-gray-300 inline-block min-w-[100px]"></span></div>
              <div>联系电话：<span class="border-b border-gray-300 inline-block min-w-[100px]"></span></div>
            </div>
            <div class="mt-2">
              <span class="text-gray-700">代理权限：</span>
              <label class="inline-flex items-center mr-4">
                <input type="checkbox" class="mr-1">
                <span>一般授权</span>
              </label>
              <label class="inline-flex items-center">
                <input type="checkbox" class="mr-1">
                <span>特别授权</span>
              </label>
            </div>
          </div>
          
          <div>
            <h3 class="font-semibold mb-2">答辩事项：</h3>
            <div class="border border-gray-300 rounded p-3 min-h-[100px] text-gray-500">
              请在此处填写答辩意见...
            </div>
          </div>
        </div>
      </div>
      <div v-else class="text-gray-400 text-center">暂无预览</div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'

export default {
  name: 'TemplateDetail',
  setup() {
    const route = useRoute()
    const docContent = ref(true) // 默认显示内容

    const docName = computed(() => {
      return route.params.name || '文档详情'
    })

    onMounted(() => {
      // 这里可以根据文档名加载对应的预览内容
      console.log('加载文档:', docName.value)
    })

    const downloadDoc = () => {
      // 实际下载逻辑
      alert('下载功能待实现')
    }

    const shareTemplate = () => {
      // 分享功能实现
      console.log('分享模板:', docName.value)
    
    }

    const copyToClipboard = (text) => {
      if (navigator.clipboard) {
        navigator.clipboard.writeText(text).then(() => {
          alert('链接已复制到剪贴板')
        }).catch(() => {
          // 降级处理：使用传统方法
          fallbackCopyToClipboard(text)
        })
      } else {
        fallbackCopyToClipboard(text)
      }
    }

    const fallbackCopyToClipboard = (text) => {
      const textArea = document.createElement('textarea')
      textArea.value = text
      document.body.appendChild(textArea)
      textArea.focus()
      textArea.select()
      try {
        document.execCommand('copy')
        alert('链接已复制到剪贴板')
      } catch (err) {
        console.error('复制失败:', err)
        alert('复制失败，请手动复制链接')
      }
      document.body.removeChild(textArea)
    }

    return {
      docName,
      docContent,
      downloadDoc,
      shareTemplate
    }
  }
}
</script>

<style scoped>
.detail-page {
  min-height: 100vh;
  background: #f5f5f5;
}
header {
  height: 56px;
}
.preview-area {
  min-height: 400px;
}
</style>